<script lang="ts" setup name="CapitalAccount">
import {useRouter} from 'vue-router';
const router = useRouter();
const handleRightAdd=()=>{

}
</script>
<template>
  <nav-header class="header" title='选择充值方式' >
    <template #right>
      <img @click="handleRightAdd" class="header-rigth" src="@/assets/images/icon/my-account/add.png"/>
    </template>
  </nav-header>
  <div class="bank-list">
    <div :class="['bank-list-item',index==0?'active':'']" v-for="(item,index) in [1,2]">
      <div class="info">
        <img src="@/assets/images/icon/icon-home-list-btc.png" alt="">
        <span>000 000 3840</span>
      </div>
      <img class="icon-check" src="@/assets/images/icon/icon-check.png" alt="">
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .header{
    .header-rigth{
      width: 10px;
      padding-right: 10px;
    }
  }
  .bank-list{
    padding: 10px;
    &-item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 36px;
      border-radius: 6px;
      background: #F7F7F7;
      margin-bottom: 8px;
      padding: 0 8px;
       .info{
         display: flex;
         align-items: center;
         img{
           width: 20px;
           margin-right: 6px;
         }
         span{
           font-weight: bold;
           font-size: 8px;
           color: #2C2C2C;
         }
       }
      .icon-check{
        display: none;
        width: 12px;
      }
    }
    .active{
      border: 1px solid #1642F4;
      .icon-check{
        display: block;
      }
    }
  }
</style>
